<template>
  <el-form
    ref="loginForm"
    :model="form"
    :rules="rules"
    label-width="0"
    size="large"
    @keyup.enter="login"
    class="noFlex"
  >
    <el-form-item prop="user">
      <el-input
        v-model="form.user"
        prefix-icon="el-icon-user"
        clearable
        :placeholder="$t('login.userPlaceholder')"
      >
        <!-- <template #append>
          <el-select v-model="userType" style="width: 130px">
            <el-option :label="$t('login.admin')" value="admin"></el-option>
            <el-option :label="$t('login.user')" value="user"></el-option>
          </el-select>
        </template> -->
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model="form.password"
        prefix-icon="el-icon-lock"
        clearable
        show-password
        :placeholder="$t('login.PWPlaceholder')"
      ></el-input>
    </el-form-item>
    <el-form-item style="margin-bottom: 10px">
      <el-col :span="12">
        <el-checkbox
          :label="$t('login.rememberMe')"
          v-model="form.remember"
          @change="handleRemember"
        ></el-checkbox>
      </el-col>
      <!-- <el-col :span="12" class="login-forgot">
        <router-link to="/reset_password"
          >{{ $t("login.forgetPassword") }}？</router-link
        >
      </el-col> -->
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        style="width: 100%"
        :loading="islogin"
        round
        @click="login"
        >{{ $t("login.signIn") }}</el-button
      >
    </el-form-item>
    <!-- <div class="login-reg">
      {{ $t("login.noAccount") }}
      <router-link to="/user_register">{{
        $t("login.createAccount")
      }}</router-link>
    </div> -->
  </el-form>
</template>

<script>
import { resetTree } from '@/utils/resetTree'

export default {
  data () {
    return {
      userType: 'admin',
      // form: {
      // 	user: "admin",
      // 	password: "admin",
      // 	autologin: false
      // },
      form: {
        user: "",
        password: '',
        remember: false
      },
      rules: {
        user: [
          { required: true, message: this.$t('login.userError'), trigger: 'blur' }
        ],
        password: [
          { required: true, message: this.$t('login.PWError'), trigger: 'blur' }
        ]
      },
      islogin: false,
    }
  },
  watch: {
    userType (val) {
      if (val == 'admin') {
        this.form.user = 'admin'
        this.form.password = 123456
      } else if (val == 'user') {
        this.form.user = 'user'
        this.form.password = 'user'
      }
    }
  },
  mounted () {
    if (this.$TOOL.data.get("USER_REMEMBER")) {
      this.form = this.$TOOL.data.get("USER_REMEMBER")
    }
  },
  methods: {
    async login () {
      var validate = await this.$refs.loginForm.validate().catch(() => { })
      if (!validate) { return false }

      this.islogin = true
      var data = {
        account: this.form.user,
        // password: this.$TOOL.crypto.MD5(this.form.password)
        password: this.form.password,
        remember: this.form.remember
      }
      //获取token
      var user = await this.$API.auth.token.post(data)
      console.log(user)
      if (user.code == 200) {
        this.$TOOL.cookie.set("TOKEN", user.data.accessToken, {
          expires: this.form.autologin ? 24 * 60 * 60 : 0
        })
        this.$TOOL.data.set("REFRESHTOKEN", user.data.refreshToken)
      } else {
        this.islogin = false
        return false
      }
      //获取菜单
      let res = null
      let menuList = null
      let userInfo = null
      // if (this.form.user == 'admin') {
      res = await this.$API.user.getMenus.get()
      this.$TOOL.data.set("ROLELIST", res.data.roleList)
      this.$TOOL.data.set("DEPARTMENTID", res.data.departmentIds)
      this.$TOOL.data.set("BUTTONLIST", res.data.bonttonList)

      menuList = resetTree(res.data.menuList, '')

      userInfo = {
        userId: res.data.id,
        userName: res.data.username,
        departmentId: res.data.departmentId,
        img: res.data.img,
        phone: res.data.phone,
        roleId: res.data.roleId,
        roleName: res.data.roleName,
        positionName: res.data.positionName,
        dashboard: "0",
        role: ["SA"]
      }
      this.$TOOL.data.set("USER_INFO", userInfo)
      // } else {
      // res = await this.$API.demo.menu.get()
      // }
      if (res.code == 200) {
        if (menuList.length == 0) {
          this.islogin = false
          this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
            type: 'error',
            center: true
          })
          return false
        }

        this.$TOOL.data.set("MENU", menuList)
        console.log('menuList')
        console.log(menuList)
        let list = res.data.modList
        let p_list = []
        list.map(item =>
          p_list.push(item.modId)
        )
        this.$TOOL.data.set("PERMISSIONS", p_list)
        // this.$TOOL.data.set("PERMISSIONS", res.data.permissions)
        // this.$TOOL.data.set("DASHBOARDGRID", res.data.dashboardGrid)

      } else {
        this.islogin = false
        this.$message.warning(res.message)
        return false
      }

      this.$router.replace({
        path: '/'
      })
      this.$message.success("Login Success 登录成功")
      this.islogin = false
    },
    // 是否记住我
    handleRemember (val) {
      val ? this.$TOOL.data.set("USER_REMEMBER", this.form) : this.$TOOL.data.remove("USER_REMEMBER")
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-input) {
  height: 45px;
}
</style>

